<template>
	<view>
		<view class="bg grid-container">
			<view class="grid-content">
                <view
                    v-for="(categoryItem, categoryIndex) in menuList"
                    :key="categoryIndex"
                >
                    <view class="grid-content-title">
                        <view class="grid-content-title-border"></view>
                        <view class="">{{ categoryItem.name }}</view>
                    </view>
                    <u-row gutter="10">
                        <view style="display: flex; flex-wrap: wrap; width: 100%;margin-top: 20rpx;">
                            <u-col
                                v-for="(item, index) in categoryItem.list"
                                :key="index"
                                :span="6"
                            >
                                <view class="grid-item" @click="onJump(item)">
                                    <view class="grid-item-icon-box" :style="{background: item.bgColor}">
                                        <u-icon :name="item.icon" size="36" color="#fff" />
                                    </view>
                                    <view class="grid-item-label">{{item.name}}</view>
                                    <view v-if="item.count" class="count-bar">{{ item.count > 99 ? '99+' : item.count }}
                                    </view>
                                </view>
                            </u-col>
                        </view>
                    </u-row>
                </view>
			</view>
		</view>
	</view>
</template>
<script>

	import permission from "../../../utils/permission";

    export default {
        mixins: [permission],
        data() {
			return {
                categoryList: [
                    {
                        name: '功能',
                        list: [
                            {
                                name: '人机绑定',
                                path: '/pages/schedule/empBindMachineBatch/index',
                                state: 0,
                                icon: 'man-add-fill',
                                bgColor: 'rgb(21, 166, 87)',
                                count: 0,
                                pcRouterPath: ['empMachine', 'scheduling']
                            },
                            {
                                name: '我的机台',
                                path: '/pages/schedule/myMachine/index',
                                state: 0,
                                icon: 'coupon',
                                bgColor: 'rgb(129, 65, 217)',
                                count: 0,
                                pcRouterPath: ['empMachine', 'scheduling']
                            },
                            {
                                name: '生产排班',
                                path1: '/pages/monitorCenter/kanBan/index',
                                state: 0,
                                icon: 'calendar',
                                bgColor: '#2d8cf0',
                                count: 0,
                                pcRouterPath: ['scheduling']
                            }
                        ]
                    }
                ],
				showWorkshop: false,
				searchParams: {
					workshopId: null,
					workshopName: null
				},
				workshopList: [],
			};
		},
		onShow() {
            this.menuList = this.getMenuListPermission(this.categoryList);
        },
		methods: {
			onJump({path}) {
				if (path) {
					wx.navigateTo({
						url: path
					});
				} else {
					wx.showToast({
						title: '敬请期待',
						icon: 'error'
					})
				}
			}
		}
	}
</script>
<style scoped lang="scss">
@import "../../production/grid/grid";
</style>
